<template>
  <div style="overflow: auto; max-height: 70vh; padding: 24px 24px 16px">
    <v-form
      lazy-validation
      style="height: 100%;"
      :value="valid"
      @input="onUpdate"
    >
      <v-list
        three-line
        subheader
        style="background: transparent; width: 100%"
      >
        <v-list-item>
          <div class="mt-4 grid grid-cols-4 gap-4">
            <v-text-field
              v-model="content.name"
              outlined
              persistent-hint
              :hint="t('instance.nameHint')"
              :label="t('name')"
              :rules="nameRules"
              required
            />
            <v-text-field
              v-model="content.author"
              outlined
              persistent-hint
              :hint="t('modpack.authorHint')"
              :label="t('author')"
              required
            />
            <v-text-field
              v-model="content.description"
              class="col-span-2"
              outlined
              persistent-hint
              :hint="t('modpack.descriptionHint')"
              :label="t('description')"
            />
          </div>
        </v-list-item>
      </v-list>
    </v-form>
    <StepperAdvanceContent :valid.sync="valid" />
  </div>
</template>

<script lang=ts setup>
import { kInstances } from '@/composables/instances'
import { injection } from '@/util/inject'
import { required } from '@/util/props'
import { kInstanceCreation } from '../composables/instanceCreation'
import StepperAdvanceContent from './StepperAdvanceContent.vue'

defineProps({
  valid: required(Boolean),
})
const emit = defineEmits(['update:valid'])
const { t } = useI18n()
const { data: content } = injection(kInstanceCreation)
const { instances } = injection(kInstances)
const nameRules = computed(() => [
  (v: any) => !!v || t('instance.requireName'),
  (v: any) => !instances.value.some(i => i.name === v) || t('instance.duplicatedName'),
])

const onUpdate = ($event: any) => {
  emit('update:valid', $event)
}
</script>
